<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item,index) in cates" :key="item.id" class="f-item b-b" :class="{active: item.catId === currentId}"
			 @click="tabtap(item,index)">
				{{item.simpleName}}
			</view>
		</scroll-view>
		<!-- <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
				<text class="s-item">{{item.name}}</text>
				<view class="t-list">
					<view @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.id">
						<image :src="titem.picture"></image>
						<text>{{titem.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view> -->
		<scroll-view scroll-with-animation scroll-y @scrolltolower='loadMore' @scroll="rightScroll" class="right-aside">
			<image :src="load_img" class="currCateImg" mode=""></image>
			<myTab v-if="secCates.length>0" @tabClick="chikdClick" ref="mid"  isCate border='#ee5b25' :tabs='secCates'></myTab>
			<goodList v-if="slist.length>0" :column='1' :goodsList="slist"></goodList>
			<empty v-else emptyText="无对应商品"></empty>
			<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import myTab from "@/components/scrollTab/scrollTab.vue";
	import goodList from '@/components/goodsCardGrid/goodsCardGrid.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty.vue"
	export default {
		components: {
			myTab,
			goodList,
			uniLoadMore,
			empty
		},
		data() {
			return {
				load_img: '',
				secCates: [],
				// rightTop: 0,
				currentPage: 1,
				hasMore: true,
				needLoad: false,
				sizeCalcState: false,
				loadingType: 'more',
				cates: [],
				tabScrollTop: 0,
				currentId: 1,
				currentMidId: -1,
				flist: [],
				slist: [],
				postId: null
			}
		},
		onShow() {
		  // 修复进入商品页放回时 postid 丢失数据重新刷新
      this.postId = uni.getStorageSync('postId')
      if (!uni.getStorageSync('goodsBack')){
        if (this.postId) {
          console.log('1')
          this.initdata();
        } else {
          console.log('2')
          this.secCates = []
          this.loadData();
        }
      }
		},
		onHide() {
			if (this.postId) {
				uni.removeStorageSync('postId')
      }
      uni.removeStorageSync('goodsBack')
      console.log('hide')
		},
    onLoad(){
      uni.removeStorageSync('goodsBack')
    },
		onUnload() {
			if (this.postId) {
				uni.removeStorageSync('postId')
			}
      uni.removeStorageSync('goodsBack')
      console.log('unload')
		},
		methods: {
			rightScroll(e) {
				this.rightTop = e.detail.scrollTop
			},
			// 加载更多数据
			loadMore() {
        console.log('loadMore=====>');
        this.loadingType = 'nomore'
				if (this.hasMore) {
					this.currentPage++
					this.loadGoods(this.currentMidId)
				}
			},
			// 子类点击
			chikdClick(item) {
				console.log(item,'1')
        console.log('chikdClick===>');
				this.hasMore = true;
        this.currentMidId = item.item.catId
				this.currentPage = 1
				this.loadGoods(this.currentMidId)
			},
			initdata() {
				let that = this
				that.$Request.request('/api/goodscats/getGoodsCats', 'GET', {}).then(res => {
					if (res.status == 1) {
						that.cates = res.data
						that.load_img = res.data[0].catBanner
						that.currentId = that.postId
						let idx = that.cates.findIndex(item => {
							return item.catId == that.postId
						})
						console.log(res.data[idx])
						if(res.data[idx].children.length > 0){
							that.secCates = res.data[idx].children
							console.log(that.secCates)
							that.currentMidId = that.secCates[0].catId
							that.loadGoods(res.data[idx].children[0].catId)
						}else{
							that.secCates = res.data[idx].children
							that.loadGoods(that.currentId)
						}
					
					}
				}).catch(err => {
					console.log(err)
				})
			},
			loadData() {
				let that = this
				that.$Request.request('/api/goodscats/getGoodsCats', 'GET', {}).then(res => {
					if (res.status == 1) {
						that.cates = res.data
						that.currentId = res.data[0].catId
						that.load_img = res.data[0].catBanner
						if (res.data[0].children && res.data[0].children.length > 0) {
							// console.log(that.postId)
							console.log('length>0')
							if (that.postId) {
								console.log('length>0 postid为true')
								that.currentId = that.postId
								let idx = that.cates.findIndex(item => {
									return item.catId == that.postId
								})
								that.secCates = res.data[idx].children
								that.currentMidId = that.secCates[0].catId
							} else {
								console.log('length>0 postid为true')
								that.secCates = res.data[0].children
								that.currentMidId = that.secCates[0].catId
							}
							that.loadGoods(that.currentMidId)
						} else {
							
							that.loadGoods(that.currentId)
						}
					}

				}).catch(err => {
					console.log(err)
				})
			},
			loadGoods(catId) {
				if (this.currentPage == 1) {
					this.slist = []
				}
				let that = this
				that.$Request.request('/api/goods/getGoodsBycat', 'POST', {
					catId: catId,
					p: that.currentPage

				}).then(res => {
					console.log(res)
					if (res.data) {
						let slist = res.data.list
						if (!slist.length) that.hasMore = false
						slist.forEach(item => {
							item.integral = parseFloat(item.integral)
							that.slist.push(item)
						})
					}
				}).catch(err => {
					console.log(err)
				})
				this.$nextTick(function() {
					this.rightTop = 0
				})
			},
			//一级分类点击
			tabtap(item, index) {
        this.hasMore = true;
        this.currentPage = 1
				let cate = this.cates[index]
				this.load_img = cate.catBanner
				this.currentId = cate.catId;
				this.secCates = cate.children || []
				// this.loadData_img()
				if (cate.children && cate.children.length) {
					this.currentMidId = this.secCates[0].catId
					this.loadGoods(this.currentMidId)
					// this.$refs.mid.backleft()
				} else {
					this.loadGoods(this.currentId)
				}

			},
			//右侧栏滚动
			asideScroll(e) {

				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].pid;
				}
			},

		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.currCateImg {
		margin: 20rpx auto;
		width: 98%;
		max-height: 220rpx;
		border-radius: 10rpx;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		@extend %textover;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
		height: 100%;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}
</style>
